﻿@using Enter.Admin.Dtoes
@using Enter.Admin.Utils
@using Enter.Admin.Enums
@{
    ViewData["Title"] = "模板管理";
}
@section Styles {
    <link href="~/plugins/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
    <link href="~/plugins/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" />

    <link href="~/plugins/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" />

    <link href="~/plugins/dropzone/dist/min/dropzone.min.css" rel="stylesheet" />
    <link href="~/plugins/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet" />
    <style>
        div .bootstrap-select .btn.bs-placeholder {
            color: rgb(0,0,0) !important
        }

        div .bootstrap-select .btn.bs-placeholder:active, div .bootstrap-select .btn.bs-placeholder:focus, div .bootstrap-select .btn.bs-placeholder:hover {
            color: rgb(0,0,0) !important
        }

        div .bootstrap-select .btn.btn-light, div .bootstrap-select .btn.btn-white {
            color: rgb(0,0,0) !important
        }

        .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show > .btn-white.dropdown-toggle {
            color: rgb(255,255,255) !important
        }
    </style>
}
@section Scripts {
    <script src="~/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="~/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="~/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
    <script src="~/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="~/plugins/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>

    <script src="~/plugins/dropzone/dist/min/dropzone.min.js"></script>
    <script src="~/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <script src="~/plugins/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        var id = 0;
        var objectId = 0;
        var objectType = @((int)EnumAttachmentObjectType.模板文件);
        
        var searchObj = function () {
            return {
                ObjectType: objectType,
                ObjectId: objectId,
            }
        }

        var dataTable = null;
        var handleDataTableDefault = function () {
            if ($('#data-table-default').length !== 0) {
                dataTable = $('#data-table-default').DataTable({
                    dom: 'lBrtip',//'',// 'iCflrtp',//'Bfrtip',
                    buttons: [
                        //'pageLength',
                        {
                            text: '上传 <i class="fa fa-plus"></i>',
                            className:'btn btn-primary',
                            action: function (e, dt, node, config) {
                                $('#modal-dialog-dropzone').modal()
                            }
                        }
                    ],
                    "lengthMenu": [10, 25, 50],//[[10, 25, 50], [10, 25, 50]],
                    responsive: isMobile, //是否显示全部
                    "searching": false,//datatables自带的搜索
                    "processing": true,//加载中
                    "serverSide": true,
                    "ajax": {
                        type: "POST",
                        url: '@Url.Action("Index", "Attachment")',
                        contentType: "application/json; charset=utf-8",
                        async: true,
                        data: function (data) {
                            data.Data = searchObj()
                            return JSON.stringify(data);
                        }
                    },
                    rowId: 'Id',
                    columns: [{ title: "文件", data: "Name" }, { title: "操作", data: "Id", orderable: false }],
                    "columnDefs": [
                        {
                            "targets": -1,//-1表示最后一行 也可以是数组，"visible": false,"searchable": false
                            "width": "250px",
                            render: function (data, type, full, meta) {
                                var html_c = '<a class="btn btn-sm btn-info" target="_blank" href="@Url.Action("Export", "Home")/' + full.Id + '">下载 <i class="fas fa-download"></i></a>  ';
                                html_c = html_c + '<a style="margin-left: 10px;" class="btn btn-sm btn-info btn-delete" data-message="' + full.Name + '" data-objectId="' + full.ObjectId + '" data-id="' + full.Id + '">删除 <i class="fa fa-trash-alt"></i></a>';
                                return html_c;
                            }
                        }
                    ],
                    "language": datatable_language
                });
            }
        };

        var deleteRow = function (id, objectId, message) {
             // https://github.com/t4t5/sweetalert
            swal({
                title: '确定删除 "' + message+'" 吗?',
                text: '删除后不能恢复!',
                icon: 'warning',
                buttons: {
                    cancel: {
                        text: '取消',
                        value: null,
                        visible: true,
                        className: 'btn btn-default',
                        closeModal: true,
                    },
                    confirm: {
                        text: '删除',
                        value: true,
                        visible: true,
                        className: 'btn btn-warning',
                        closeModal: true
                    }
                }
            }).then(willDelete => {
                if (willDelete) {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        url: "@Url.Action("Delete", "Attachment")" + "?id=" + id,
                        success: function (result) {
                            if (result.Success) {
                                dataTable.ajax.reload();
                            } else {
                                show_alert('warning', result.Message)
                            }
                        },
                        error: function (e) {
                            show_alert('error', '网络异常.')
                        }
                    });
                }
            });
        };


        function filesParamName() {
            return "files";
        }
        Dropzone.autoDiscover = false;
        var settlmentProofDropZone = null
        var dropzone_container_upload = function () {
            $("#dropzone-upload").dropzone({
                maxFiles: 5,
                url: "@Url.Action("Upload", "Attachment")",//  + "?objectId=" + objectId + "&objectType=" + objectType
                method: "post",
                acceptedFiles: "",
                paramName: filesParamName,
                addRemoveLinks: true,
                uploadMultiple: true,
                init: function () {
                    settlmentProofDropZone = this;
                    this.on("sending", function (file, xhr, data) {
                        data.append("objectIds", objectId);
                        data.append("objectType", objectType);
                        data.append("catalogType", $("#CatalogType").val());
                    });
                    this.on("success", function (file, resp) {
                        if (resp.Success) {
                            dataTable.ajax.reload();
                            $('#modal-dialog-dropzone').modal('hide')
                        } else {
                            show_alert('warning', resp.Message)
                        }
                        this.removeAllFiles();
                    });
                }
            });
        }

        $(document).ready(function () {
            $('.selectpicker').selectpicker('render');
            handleDataTableDefault();
            dropzone_container_upload();
            $("#data-table-default").on("click", ".btn-delete", function (e) {
                e.preventDefault();
                var id = $(this).attr("data-id");
                var objectId = $(this).attr("data-objectId");
                var message = $(this).attr("data-message");
                deleteRow(id, objectId, message)
            });
        });

    </script>
}

<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-right">
    <li class="breadcrumb-item"><a href="javascript:;">系统设置</a></li>
    <li class="breadcrumb-item active">模板管理</li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">模板管理 <small>...</small></h1>
<!-- end page-header -->
<!-- begin panel -->
<div class="panel panel-inverse">
    <!-- begin panel-heading -->
    <div class="panel-heading">
        <h4 class="panel-title">模板列表</h4>
    </div>
    <!-- end panel-heading -->
    <!-- begin panel-body -->
    <div class="panel-body">
        <form id="form-delete" style="display:none">@Html.AntiForgeryToken()</form>
        <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle display nowrap" style="width:100%">
        </table>
    </div>
    <!-- end panel-body   -->
</div>
<!-- end panel -->
<!-- #modal-dialog -->
<div class="modal fade" id="modal-dialog-dropzone" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">上传</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <div class="input-group" style="display:none">
                    @Html.DropDownList("CatalogType", Tools.EnumList(nameof(EnumAttachmentCatalogType), true), new { @class = "form-control selectpicker", @data_live_search = "true" })
                </div>
                <div id="dropzone-container">
                    <form asp-action="Upload" asp-controller="Attachment" class="dropzone needsclick" enctype="multipart/form-data" id="dropzone-upload">
                        <div class="dz-message needsclick">
                            点击选择文件
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-white" data-dismiss="modal">关闭</a>
                <a href="javascript:;" id="dropzone-upload-button" style="display:none" class="btn btn-primary">确定</a>
            </div>
        </div>
    </div>
</div>
